<template>
  <el-card class="box-card ">
    <div slot="header" class="clearfix relative">
      <span class="title-icon">搜索条件</span>
      <el-button-group class="btn-group">
        <el-button size="mini" type="primary" @click="onSubmit">查询</el-button>
        <el-button size="mini" type="primary" @click="onReset">重置</el-button>
      </el-button-group>
    </div>
    <div :class="{ noOpen: !isOpen }">
      <el-form
        :model="searchCriteria"
        class="text-sm"
        size="mini"
        label-width="60px"
      >
        <el-row :gutter="20" class="flex flex-wrap">
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="运单号">
              <el-input
                v-model="searchCriteria.waybillNos"
                type="textarea"
                placeholder="运单号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="参考号">
              <el-input
                v-model="searchCriteria.referenceNo"
                placeholder="参考号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="追踪号">
              <el-input
                v-model="searchCriteria.trackNumber"
                placeholder="追踪号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="订单状态">
              <el-select
                v-model="searchCriteria.status"
                filterable
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.waybillStatus"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="销售">
              <el-select
                v-model="searchCriteria.salesmanId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="客服">
              <el-select
                v-model="searchCriteria.servicesId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col
            :lg="6"
            :xl="4"
            :md="8"
            :sm="12"
            v-if="pageName === 'seaFreightList'"
          >
            <el-form-item label="海外操作">
              <el-select
                v-model="searchCriteria.overseasOperatorId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="跟单操作">
              <el-select
                v-model="searchCriteria.operationId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="国家">
              <el-select
                v-model="searchCriteria.countryId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--   -->
          <el-col
            :lg="6"
            :xl="4"
            :md="8"
            :sm="12"
            v-if="pageName === 'airFreightList'"
          >
            <el-form-item label="目的港">
              <el-select
                v-model="searchCriteria.relevanceParams.destinationPort"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="入库人员">
              <el-select
                v-model="searchCriteria.inStockOperationId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="客户代码">
              <el-input
                v-model="searchCriteria.customerCode"
                placeholder="客户代码"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="M单号">
              <el-input
                v-model="searchCriteria.relevanceParams.masterNumber"
                placeholder="M单号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="合单号">
              <el-input
                v-model="searchCriteria.waybillMergeNo"
                placeholder="合单号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="VAT">
              <el-input
                v-model="searchCriteria.relevanceParams.vat"
                placeholder="VAT"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="EORI">
              <el-input
                v-model="searchCriteria.relevanceParams.eori"
                placeholder="EORI"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="面单号">
              <el-input
                v-model="searchCriteria.sheetNumber"
                placeholder="面单号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="子单追踪号" label-width="76px">
              <el-input
                v-model="searchCriteria.subWaybillParams.trackNumber"
                placeholder="子单追踪号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="仓库代码">
              <el-input
                v-model="searchCriteria.relevanceParams.dispatchAddressCode"
                placeholder="仓库代码"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="品名">
              <el-input
                v-model="searchCriteria.liquidationInvoiceParams.declareNameCn"
                placeholder="品名"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="柜号">
              <el-input
                v-model="
                  searchCriteria.containerInformationParams.contairNumber
                "
                placeholder="柜号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="Zip Code" label-width="80px">
              <el-input
                v-model="searchCriteria.relevanceParams.dispatchZipCode"
                placeholder="Zip Code"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="起运地">
              <el-select
                v-model="searchCriteria.loadingPort"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="出库渠道">
              <el-select
                v-model="searchCriteria.outStockChannel"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, value) in configuration.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="是否自有VAT" label-width="100px">
              <el-select
                v-model="searchCriteria.relevanceParams.isVatAndEori"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="进口商是否认证" label-width="100px">
              <el-select
                v-model="searchCriteria.relevanceParams.eoriIsCertified"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="是否生成起运港账单" label-width="130px">
              <el-select
                v-model="searchCriteria.billStatus"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="是否生成目的港账单" label-width="130px">
              <el-select
                v-model="searchCriteria.portOfDestinationBillStatus"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="是否报关" label-width="100px">
              <el-select
                v-model="searchCriteria.isCustomerDeclaration"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xl="4" :md="8" :sm="12">
            <el-form-item label="是否购买保险" label-width="100px">
              <el-select
                v-model="searchCriteria.isBuyInsurance"
                filterable
                placeholder="请选择"
              >
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="8" :md="12" :sm="24">
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="searchCriteria.inStockTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeInStockTime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="8" :md="12" :sm="24">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchCriteria.createdTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :xl="8" :md="12" :sm="24">
            <el-form-item label="离港时间">
              <el-date-picker
                v-model="searchCriteria.leavePortTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="text-center">
      <i
        class="text-lg pointer"
        :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        @click="isOpen = !isOpen"
      ></i>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    pageName: {
      type: String,
      default: "airFreightList"
    }
  },
  data() {
    return {
      isOpen: false,
      searchCriteria: {
        waybillNo: "", // 运单号
        customerId: "", // 客户
        status: "", // 订单状态
        inStockChannel: "", //入库渠道
        salesmanId: "", //销售
        referenceNo: "", //参考号
        trackNumber: "", //追踪号
        overseasOperatorId: "", //海外操作
        operationId: "", //跟单操作
        servicesId: "", //客服
        createdTime: [], // 创建时间
        leavePortTime: [], // 离港时间
        startCreatedTime: "", //创建时间 开始
        endCreatedTime: "", //创建时间 结束
        countryId: "", //国家
        inStockOperationId: "", //入库人员
        customerCode: "", //客户代码
        inStockTime: [], // 入库时间开始
        startInStockTime: "", // 入库时间开始
        endInStockTime: "", //入库时间 结束
        waybillMergeNo: "", //合单号

        sheetNumber: "", // 面单号
        outStockChannel: "", //出库渠道
        billStatus: "", // 是否生成起运港账单
        portOfDestinationBillStatus: "", // 是否生成目的港账单
        isCustomerDeclaration: "", //是否报关
        isBuyInsurance: "", //是否购买保险
        waybillNos: "", //多个运单号
        loadingPort: "", //起运地
        containerInformationParams: {
          contairNumber: "" // 柜号
        },
        liquidationInvoiceParams: {
          declareNameCn: "" // 品名
        },
        subWaybillParams: {
          trackNumber: "" // 子单追踪号
        },
        relevanceParams: {
          masterNumber: "", //M单号
          vat: "", //vat
          eori: "", //eori
          isVatAndEori: "", //是否自有VAT
          eoriIsCertified: "", //进口商是否认证
          dispatchAddressCode: "", //仓库代码
          startLeavePortTime: "", //离港时间 开始
          endLeavePortTime: "", //离港时间 结束
          destinationPort: "", //目的港
          dispatchZipCode: "" //ZipCode
        }
      },
      configuration: {
        userAll: {
          1: "Sam",
          2: "Carrot",
          3: "Mason",
          4: "Henry"
        },
        waybillStatus: {
          1: "待确认",
          2: "待收货",
          3: "已完成",
          4: "已冻结"
        }
      }
    };
  },
  methods: {
    onSubmit() {},
    onReset() {},
    changeInStockTime(val) {
      console.log(
        "%cval: ",
        "color: MidnightBlue; background: Aquamarine;",
        val
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-group {
  position: absolute;
  right: 0;
  top: -20%;
}
.noOpen {
  max-height: 100px;
  overflow: hidden;
}
</style>

<style scoped>
/deep/ .el-select,
.el-date-editor--datetimerange.el-input,
.el-date-editor--datetimerange.el-input__inner,
.el-input {
  width: 100%;
}
</style>
